<template>
  <view>
    <view 
      class="bill-month-group" 
      v-for="(monthGroup, monthIndex) in billData" 
      :key="monthIndex"
    >
      <view class="bill-month-header">
        <text class="month">{{ monthGroup.month }}</text>
        <text class="summary">
          总支出: ¥{{ monthGroup.totalExpense }}  总收入: ¥{{ monthGroup.totalIncome }}
        </text>
      </view>

      <view 
        class="bill-item" 
        v-for="(item, itemIndex) in monthGroup.items" 
        :key="itemIndex"
      >
        <image class="bill-icon" :src="item.icon" />
        <view class="bill-info">
          <view class="bill-title">{{ item.title }}</view>
          <view class="bill-date">{{ item.date }}</view>
        </view>
        <view :class="['bill-amount', item.type === 'out' ? 'out' : 'in']">
          {{ item.type === 'out' ? '-' : '' }}¥{{ item.amount }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue';
import { ref } from 'vue';
import { getAllTransactions } from '../../../utils/api';

const billData = ref([
  {
    month: '十月',
    totalExpense: '2234.40',
    totalIncome: '5000.00',
    items: [
      {
        icon: '/static/walmart.png',
        title: '沃尔玛超市',
        date: '2023-10-03 18:10:23',
        amount: '283.00',
        type: 'out', // 支出
      },
      {
        icon: '/static/wechat.png',
        title: '微信交易',
        date: '2023-10-03 18:10:23',
        amount: '200.00',
        type: 'in', // 收入
      },
    ],
  },
  {
    month: '九月',
    totalExpense: '2234.40',
    totalIncome: '5000.00',
    items: [
      {
        icon: '/static/walmart.png',
        title: '沃尔玛超市',
        date: '2023-09-22 14:21:45',
        amount: '283.00',
        type: 'out',
      },
    ],
  },
])
const params = ref([])
// 获取数据
onMounted(()=>{
	getAllTransactions().then(res=>{
		// 构造合适的数据
		// 加入到billData中
		billData.value.push(res)
	})
})
</script>

<style src="./all.css"></style> 
